<template>
	<view class="wrap">
		<js-error mode="top" ref="jsError" z-index="999"></js-error>
		<view class="search cu-bar">
			<u-search v-model="barCode" ref="uSearch" :focus="focus" placeholder="请先聚焦后在扫描条码" :show-action="false"
				@custom="search" @search="search"></u-search>
			<view style="margin-left:10px;display: flex;flex-direction: column;">
				<u-button size="medium" @click="empty" type="error" style="width: 60px;height: 25px;">清 空
				</u-button>

				<u-button size="medium" v-if="cWhData.bWhPos=='1'" @click="clearing" type="primary"
					style="margin-top: 10px;width: 60px;height: 25px;">清货位
				</u-button>
			</view>
		</view>

		<view style="margin: 10px;">
			<u-button size="medium" @click="()=>{ckshow = true;model={...cWhData}}" type="primary"
				style="width: 40px;height: 30px;color: #fff;">
				所选仓库
			</u-button>
			<text style="margin-left: 10px;color: red;">{{cWhData.cWhName}}</text>
		</view>

		<!-- <u-form class="form bg-white" :model="cWhData" ref="uForm" label-position="left">
			<u-form-item label="仓库:" prop="testCarVen" label-width="80" required :label-style="{'font-weight':'bold'}">
				<js-select v-model="cWhData.cWhCode" :items="carVenSelectList" placeholder="请选择仓库" :tree="false"
					:label-value="cWhData.cWhName" @label-input="cWhData.cWhName = $event" @confirm="selectConfirm">
				</js-select>
			</u-form-item>
		</u-form> -->

		<view style="margin:0px 5px 10px;">
			<u-table>
				<u-tr>
					<u-th width="150px">批次</u-th>
					<u-th>简称</u-th>
					<u-th width="50px">数量</u-th>
					<u-th v-if="cWhData.bWhPos=='1'">货位</u-th>
				</u-tr>
				<view style=" height: 49vh;overflow: scroll;">
					<view v-for="(item,index) in list" :key='index' @click='detailsTr(item)'
						:style="{backgroundColor: item.flag=='1' && item.rkstate=='0'? 'yellow':item.flag=='1' && item.rkstate=='1'? '#81b337':''}">
						<!-- <u-swipe-action @click="click(index)" :index="index" :options="options"   :bg-color="item.flag=='1'? 'yellow':''"> -->
						<u-tr v-if="list.length">
							<u-td width="150px"> {{item.cBatch}}</u-td>
							<u-td>{{item.cInvMnemCode}}</u-td>
							<u-td width="50px">{{item.BarQty}}</u-td>
							<u-td v-if="cWhData.bWhPos=='1'">{{item.cPosName}}</u-td>
						</u-tr>
						<!-- </u-swipe-action> -->
					</view>
					<u-empty v-if="!list.length" text="暂无数据" mode="data"></u-empty>

				</view>

			</u-table>
		</view>
		<view style="margin-left: 5px;font-size: 18px;">
			<view>
				总扫描箱数：<text style="color: #878700;padding-right: 10px;font-size: 24px;">{{cases}}</text> 箱
			</view>
			<view>
				总扫描数量：<text style="color: #878700;padding-right: 10px;font-size: 24px;">{{pieces}}</text> 件
			</view>
			<view style='text-align: right;position: relative;top: -30px;right: 10px;'>
				<u-button size="mini" type="primary" @click="ground" v-if="cWhData.bWhPos=='1'"
					style="margin-bottom: 15px;width: 100px;height: 30px; color: #fff;font-size: 16px;">
					上架
				</u-button>
			</view>
		
			<view >
				<movable-area class="movable-area">
					<movable-view class="movable-view" :x="x" :y="y" direction="all">
						<u-button size="mini" @click="warehouse" type="primary"
							style="width:90px;height: 70px;color: #fff;font-size: 16px;">入库
						</u-button>
					</movable-view>
				</movable-area>
			</view>

		</view>
		<u-popup v-model="groundShow" mode="center" width="80%" height="20%" :closeable="true" border-radius="14">
			<view
				style="height: 100%; padding: 10px;font-size: 16px; display: flex;flex-direction: column;  justify-content: center;">
				<view>
					货位扫描：
				</view>
				<u-search v-model="cPosCode" placeholder="请扫描货位码" :show-action="false" @custom="cPoSearch"
					@search="cPoSearch" :focus="hwfocus"></u-search>
			</view>

		</u-popup>
		<u-popup v-model="ckshow" mode="bottom" height="60%" :closeable='true'>
			<view style="padding: 10px;font-size: 18px;">
				请先选择仓库：
			</view>
			<view>
				<u-form class="form bg-white" :model="model" ref="uForm" label-position="left">
					<u-form-item label="" prop="testCarVen" label-width="200" required
						:label-style="{'font-weight':'bold'}">
						<js-select v-model="model.cWhCode" :items="carVenSelectList" placeholder="请选择仓库" :tree="false"
							:label-value="model.cWhName" @label-input="model.cWhName = $event">
						</js-select>

					</u-form-item>
				</u-form>
				<view style="padding: 10px;height: 100px;">
					<u-button size="mini" style="margin: 0 10px 10px 0;" @click="ckSelect(item)"
						v-for="(item,index) in this.vuex_vague" :key="index">{{item.cWhName}}</u-button>
				</view>
				<view style="position: relative;bottom: -160px; padding: 0 10px;">
					<u-button type="primary" @click="selectConfirm">确定选择</u-button>
				</view>
			</view>

		</u-popup>


		<u-popup v-model="show" mode="bottom" height="70%" :closeable='true'>

			<view style="padding: 10px;">
				<view style="font-size: 18px;">详细信息：</view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="条码：" label-width='150'>
						<u-input placeholder="" v-model="form.BarCode" :disabled='true' />
					</u-form-item>
					<u-form-item label="批次：" label-width='150'>
						<u-input placeholder="" v-model="form.cBatch" :disabled='true' />
					</u-form-item>
					<u-form-item label="流转卡：" label-width='150'>
						<view style="width: 230px; word-wrap: break-word;word-break: normal;">{{form.DoCodeStr}}</view>
						<!-- <u-input placeholder="" v-model="form.DoCodeStr" :disabled='true'  /> -->
					</u-form-item>
					<u-form-item label="数量：" label-width='150'>
						<u-input placeholder="" v-model="form.BarQty" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料编码：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvCode" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料名称：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvName" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料规格：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvStd" :disabled='true' />
					</u-form-item>
					<u-form-item label="物料图号：" label-width='150'>
						<u-input placeholder="" v-model="form.cInvAddCode" :disabled='true' />
					</u-form-item>
				</u-form>
			</view>

		</u-popup>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				x: 0, //x坐标
				y: 650, //y坐标
				model: {
					cWhCode: '',
					cWhName: '',
				},
				carVenSelectList: [],
				hwfocus: true,
				focus: true,
				cases: 0,
				pieces: 0,
				cWhData: {},
				form: {},
				groundShow: false,
				show: false,
				ckshow: false,
				barCode: '',
				cPosCode: '',
				list: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		computed: {
			...mapState(['vuex_vague'])
		},
		onShow() {},
		onLoad(params) {
			this.cWhData = JSON.parse(params.cWhData)
			this.$store.commit("modifyCpcrk", this.cWhData)
			console.log(this.cWhData)
			// this.model = this.cWhData
			this.$u.api.tm.getWarehouse({
					cWhCode: '',
					cWhType: this.cWhData.cWhType
				})
				.then(res => {
					if (res.statecode == '1') {
						this.carVenSelectList = res.subdata.map(item => {
							item.name = item.cWhName;
							item.value = item.cWhCode;
							return item
						})

					} else {
						this.$u.toast(res.message);
					}
				});
		},
		methods: {
			ckSelect(item) {
				this.model = item
			},
			selectConfirm() {
				this.ckshow = false;
				this.carVenSelectList.forEach(item => {
					if (this.model.cWhCode == item.cWhCode) {
						this.cWhData = {
							...this.cWhData,
							...item
						};
					}
				})
				this.$store.commit("modifyCpcrk", this.cWhData)
				this.empty()
				let flag = true
				this.vuex_vague.forEach(item => {
					if (this.cWhData.cWhCode == item.cWhCode) {
						flag = false;
					}
				})
				if (flag) {
					this.vuex_vague.unshift(this.cWhData)
					let arr = [...this.vuex_vague]
					this.$store.commit("modifyVague", arr.splice(0, 5))
				}
			},
			// 上架
			ground() {
				this.focus = false;
				this.hwfocus = true;
				if (this.list.length) {

					let flag = false;
					this.list.forEach(item => {
						if (item.flag == '1' && item.rkstate == '0') {
							flag = true
						}
					})
					if (flag) {
						this.groundShow = true;
					} else {
						this.$u.toast('请扫描未入库条码！');
						setTimeout(() => {
							this.focus = true;
						}, 500)
						// this.$refs.jsError.showError('', '请重新扫描产品条码！', 'info');
					}
				} else {
					this.$u.toast('请先扫描产品条码！');
					// this.$refs.jsError.showError('', '请先扫描产品条码！', 'info');
					setTimeout(() => {
						this.focus = true;
					}, 500)
				}
			},
			// 清货位
			clearing() {
				let _this = this
				_this.focus = false
				if (this.list.length) {
					uni.showModal({
						title: '提示',
						content: '是否清除全部货位',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								let newArr = _this.list.map(item => {
									if (item.rkstate == '0') {
										item.cPosName = ''
										item.cPosCode = ''
									}
									item.flag = '0'
									return item
								})
								_this.barCode = '';
								_this.list = newArr;
								_this.cases = 0;
								_this.pieces = 0;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
							setTimeout(() => {
								_this.focus = true;
							}, 500)

						}
					});
				} else {
					this.$u.toast('请先扫描产品条码')
					// this.$refs.jsError.showError('', '请先扫描产品条码！', 'info');
					setTimeout(() => {
						_this.focus = true;
					}, 500)
				}


			},
			// 清空
			empty() {
				this.barCode = '';
				this.cases = 0;
				this.pieces = 0;
				this.list = [];
				this.focus = false;
				setTimeout(() => {
					this.focus = true;
				}, 500)
			},

			// 条码获取数据
			loadList(BarCode) {
				var _this = this;
				this.$u.api.tm.getProcessflowBarCode({
					BarCode
				}).then(res => {
					if (res.statecode == '1') {
						this.list = res.subdata.map(item => {
							if (BarCode == item.BarCode) {
								item.flag = '1'
								this.cases++;
								this.pieces += item.BarQty;
							}
							return item
						})
						setTimeout(() => {
							_this.barCode = '';
							_this.focus = true;
						}, 500)


					} else {
						_this.list = []
						_this.sendMp3('bcz');
						this.$u.toast(res.message);
						// _this.$refs.jsError.showError('', res.message, 'info');
					}
					setTimeout(() => {
						_this.barCode = '';
						_this.focus = true;
					}, 500)

				})

			},
			// 详情
			detailsTr(item) {

				this.form = item;
				this.show = true;
			},
			// 货位搜索
			cPoSearch(cPosCode) {
				this.hwfocus = false;
				this.$u.api.tm.getPosition({
					cWhCode: this.cWhData.cWhCode,
					cPosCode
				}).then(res => {
					if (res.statecode == '1') {
						let newArr = this.list.map(item => {
							if (item.flag == '1' && item.rkstate == '0' && !item.cPosName) {
								item.cPosCode = res.subdata.cPosCode
								item.cPosName = res.subdata.cPosName
							}
							return item
						})
						this.list = newArr
						this.groundShow = false;
						this.cPosCode = ''
						setTimeout(() => {
							this.barCode = '';
							this.focus = true;
						}, 500)
					} else {
						this.cPosCode = ''
						this.sendMp3('bcz');
						this.$u.toast(res.message);
						setTimeout(() => {
							this.barCode = '';
							this.focus = true;
							this.hwfocus = true;
						}, 500)

						// this.$refs.jsError.showError('', res.message, 'info');
					}

				})
			},
			// 箱码
			search(value) {
				this.focus = false;
				let _this = this;
				let str = value.slice(0, 3)
				if (str == '|Rd') {
					this.barSearch(value)
				} else if (str == '||K') {
					if (this.list.length) {

						let flag = false;
						this.list.forEach(item => {
							if (item.flag == '1' && item.rkstate == '0') {
								flag = true
							}
						})
						if (flag) {
							this.cPoSearch(value)
							// this.groundShow = true;
						} else {
							this.$u.toast('请扫描未入库条码！');
							setTimeout(() => {
								_this.barCode = '';
								_this.focus = true;
							}, 500)
							// this.$refs.jsError.showError('', '请重新扫描产品条码！', 'info');
						}
					} else {
						this.$u.toast('请先扫描产品条码！');
						setTimeout(() => {
							_this.barCode = '';
							_this.focus = true;
						}, 500)
					}
					console.log(value, 'value===')
				} else {
					this.$u.toast('条码格式错误');
					setTimeout(() => {
						_this.barCode = '';
						_this.focus = true;
						// _this.searchfocus()
					}, 500);
				}


			},
			// 箱码搜索
			barSearch(value) {
				let _this = this;
				if (!this.list.length) {
					this.loadList(value);
				} else {
					let isTrue = true
					let batchFlag = true
					let newArr = this.list.map(item => {
						if (item.BarCode == value && item.flag == '1') {
							batchFlag = false
						}
						if (item.BarCode == value && item.flag != '1') {
							_this.cases++;
							_this.pieces += item.BarQty;
						}
						if (item.BarCode == value) {
							item.flag = '1';
							isTrue = false;
						}
						return item
					})
					if (isTrue) {
						uni.showModal({
							title: '提示',
							content: '该条码不是同一批任务，如需继续请先清空表格数据',
							showCancel: false,
							success: function() {
								// _this.searchfocus()
								setTimeout(() => {
									_this.barCode = '';
									_this.focus = true;
								}, 500);
							}
						});
						// this.$refs.jsError.showError('', '该条码不是同一批任务，如需继续请先清空表格数据', 'warn');
					} else {
						if (!batchFlag) {
							this.$u.toast('请勿重复扫描');
							// this.$refs.jsError.showError('', '请勿重复扫描', 'info');
						}
						this.list = newArr
						setTimeout(() => {
							_this.barCode = '';
							_this.focus = true;
							// _this.searchfocus()
						}, 500);

					}

				}
			},

			// 入库
			warehouse() {
				let _this = this
				_this.focus = false
				if (!this.list.length) {
					this.$u.toast('请先扫描产品条码');
					// this.$refs.jsError.showError('', '请先扫描产品条码', 'info');
				} else {

					let newArr1 = this.list.filter(item => {

						let obj = {
							"BarCode": item.BarCode,
							"cWhCode": this.cWhData.cWhCode,
							"cPosCode": item.cPosCode ? item.cPosCode : '',
							"cMaker": this.vuex_subdata.UserName,
							// "cMaker": this.$store.state.vuex_subdata.UserName,
						}
						return item.flag == '1' && item.rkstate == '0'
					})
					let newArr = newArr1.map(item => {

						let obj = {
							"BarCode": item.BarCode,
							"cWhCode": this.cWhData.cWhCode,
							"cPosCode": item.cPosCode ? item.cPosCode : '',
							"cMaker": this.vuex_subdata.UserName,
							// "cMaker": this.$store.state.vuex_subdata.UserName,
						}
						return obj
					})
					console.log(newArr)
					if (newArr.length) {
						this.$u.api.tm.setRdrecord10Add(newArr).then(res => {
							if (res.statecode == '1') {
								this.$u.toast(res.message);
								// this.$refs.jsError.showError('', res.message, 'info');
								this.cases = 0;
								this.pieces = 0;
								this.list = []

							} else {
								// this.$u.toast(res.message);
								this.$refs.jsError.showError('', res.message, 'info');
							}
							setTimeout(() => {
								_this.focus = true;
							}, 500)

						})
					} else {
						this.$u.toast('请先扫描未入库条码');
					}

				}
				setTimeout(() => {
					_this.focus = true;
				}, 500)
			},
			// 删除单个货位
			click(index) {

				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否清除本条货位',
					showCancel: true,
					success: function() {
						if (res.confirm) {
							let newArr = [..._this.list];
							newArr[index].cPosName = '';
							newArr[index].cPosCode = '';
							_this.list = newArr;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				});
			},
			/** 发生声音*/
			sendMp3(name) {
				console.log("=====testClick=====");
				let src = '/static/jeesite/' + name + '.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			/** 扫码 */
			toScan() {
				var _this = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						this.keywords = res.result;
						this.search();
					}.bind(this)
				});
			},

			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '../tm.css';
	$all_width: 96rpx;
	$all_height:96rpx;

	.movable-area {
		z-index:888;
		height: 97vh;
		width: 650rpx;
		top:0;
		position: fixed;
		pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件

			image {
				width: $all_width;
				height: $all_height;
			}
		}
	}
</style>
